<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
  <head>
    <base href="<%=basePath%>">
    <title>Admin</title>
    
    <%@ include file="/WEB-INF/layouts/meta.jsp" %>
    <link type="text/css" rel="stylesheet" href="common/css/content.css" />
    <link type="text/css" rel="stylesheet" href="common/css/content.css" />
    <style type="text/css">
    
    	#loading {
	        display:none; position: absolute; width: 100%; height: 100%; text-align: center;  padding: 300px 0 0 0; font: bold 12px Verdana,Arial,Helvetica,sans-serif; background-color: #ffffff; color: #336699; z-index: 9999;
	    }
    	#saveOrderBtn { cursor: pointer; margin-right: 18px; right: 10px; top:0px; position: absolute; width:16px; height:16px; }
    </style>
    
	<lrsux:Resource name="lrsux" />
	<script type="text/javascript" src="script/utils/json2.js"></script>
	<script type="text/javascript" src="script/ztree.js"></script>
    <script>
		var outerLayout, gridPerm;
		var layoutSettings = {
	            name: "outerLayout" 
	    ,       defaults: {
	                    size:                                   "auto"
	//            ,       minSize:                                80
	            ,       paneClass:                              "pane"          // default = 'ui-layout-pane'
	            ,       resizerClass:                   "resizer"       // default = 'ui-layout-resizer'
	            ,       togglerClass:                   "toggler"       // default = 'ui-layout-toggler'
	            ,       buttonClass:                    "button"        // default = 'ui-layout-button'
	            ,       contentSelector:                ".content"      // inner div to auto-size so only it scrolls, not the entire pane!
	            ,       contentIgnoreSelector:  "span"          // 'paneSelector' for content to 'ignore' when measuring room for content
	            ,       togglerLength_open:             35                      // WIDTH of toggler on north/south edges - HEIGHT on east/west edges
	            ,       togglerLength_closed:   35                      // "100%" OR -1 = full height
	            ,       hideTogglerOnSlide:             true            // hide the toggler when pane is 'slid open'
	            ,       togglerTip_open:                "Close This Pane"
	            ,       togglerTip_closed:              "Open This Pane"
	            ,       resizerTip:                             "Resize This Pane"
	            ,       fxName:                                 "slide"         // none, slide, drop, scale
	            ,       fxSpeed_open:                   750
	            ,       fxSpeed_close:                  1500
	            ,       fxSettings_open:                { easing: "easeInQuint" }
	            ,       fxSettings_close:               { easing: "easeOutQuint" }
	    }
	    ,       north: {
	    	 			size:                              91
	            ,        spacing_open:                   0                       // cosmetic spacing
	            ,       togglerLength_open:             0                       // HIDE the toggler button
	            ,       togglerLength_closed:   -1                      // "100%" OR -1 = full width of pane
	//            ,		spacing_closed: 0								//either (togglerLength_closed & spacing_closed) eq 0 is hide the toggler button
	//            ,       slidable:                               false
	            //      override default effect
	            ,       fxName:                                 "none"
	            }
	    ,       south: {
	//                    size:                                41
	//            ,       spacing_closed:                 10                       // HIDE resizer & toggler when 'closed'
	//            ,       slidable:                               true           // REFERENCE - cannot slide if spacing_closed = 0
	                   resizable:                               false
	            ,       togglerLength_open:             -1                       
	            ,       togglerLength_closed:   		-1                      // "100%" OR -1 = full width of pane
	            ,       fxName:                                 "none"
	            ,		onclose: function() {	
	            			//jQuery("#jqGrid").jqGrid("setGridHeight", calcGridHeight());
	            		}
				,		onopen: function() {	
							//jQuery("#jqGrid").jqGrid("setGridHeight", calcGridHeight());
						}
	            
	            }
	    ,       west: {
	                    size:                                 180
	            ,       spacing_closed:                 8                      // wider space when closed
	            ,       togglerAlign_closed:    "center"           // align to center of resizer
	            ,       togglerLength_closed:   48                      // make toggler 'square' - 21x21
	            ,       togglerLength_open:             48                       // toggler button size when status is opened
	            ,       togglerTip_open:                "Close West Pane"
	            ,       togglerTip_closed:              "Open West Pane"
	            ,       resizerTip_open:                "Resize West Pane"
	            ,       slideTrigger_open:              "click"         // default
	            ,       initClosed:                             false
	            //      add 'bounce' option to default 'slide' effect
	            ,       fxSettings_open:                { easing: "easeOutBounce" }
				,		onresize:                 function () { 
							//jQuery("#accordions").accordion("resize"); 
						}
				,		onclose: function() {	
						}
				,		onopen: function() {
					}
	
	            }
	    ,       east: {
	                    size:                                   90
				,		maxSize:								150
	            ,       spacing_closed:                 6                      // wider space when closed
	            ,       togglerLength_closed:   48                      // make toggler 'square' - 21x21
	            ,       togglerAlign_closed:    "center"          
	            ,       togglerLength_open:             48                       
	            ,       slideTrigger_open:              "mouseover"
	            ,       initClosed:                             false
	            //      override default effect, speed, and settings
	            ,       fxName:                                 "drop"
	            ,       fxSpeed:                                "normal"
	            ,       fxSettings:                             { easing: "" } // nullify default easing
	            }
	    ,       center: {
	                    paneSelector:                   "#mainContent"                  // sample: use an ID to select pane instead of a class
	            }
	    };
		
		//init layout
		jQuery(function($) {
			
		    // create the OUTER LAYOUT
	        outerLayout = $("body").layout(layoutSettings);
	
	        // save selector strings to vars so we don't have to repeat it
	        // must prefix paneClass with "body > " to target ONLY the outerLayout panes
	        var westSelector = "body > .ui-layout-west"; // outer-west pane
	        //var eastSelector = "body > .ui-layout-east"; // outer-east pane
	
	         // CREATE SPANs for pin-buttons - using a generic class as identifiers
	        $("<span></span>").addClass("pin-button").prependTo( westSelector );
	        //$("<span></span>").addClass("pin-button").prependTo( eastSelector );
	        // BIND events to pin-buttons to make them functional
	        outerLayout.addPinBtn( westSelector +" .pin-button", "west");
	       // outerLayout.addPinBtn( eastSelector +" .pin-button", "east" );
	
	         // CREATE SPANs for close-buttons - using unique IDs as identifiers
	        $("<span></span>").attr("id", "west-closer" ).prependTo( westSelector );
	        //$("<span></span>").attr("id", "east-closer").prependTo( eastSelector );
	        // BIND layout events to close-buttons to make them functional
	        outerLayout.addCloseBtn("#west-closer", "west");
	        //outerLayout.addCloseBtn("#east-closer", "east");
	
			$("#eMenuBar").hover(function() {
				outerLayout.allowOverflow(this);
			}, function() {
				outerLayout.resetOverflow(this);
			});
		});
    
    </script>
  </head>

<body>

	<div id="loading">Loading content, please wait..  <img src="common/images/loading.gif" alt="loading.." /></div>
	
	<div class="ui-layout-west" style="overflow:hidden;">
        <div class="header ui-widget-header">
        	Navigation
        	<span id="saveOrderBtn" class="ui-icon ui-icon-disk" title="Save Item Order"></span>
        </div>
        <div class="content">
        
        	<label>ZTree Test</label>
			<div class="zTreeDemoBackground left">
				<ul id="treeDemo" class="ztree"></ul>
			</div>
        
        </div>
	</div>
	
	<div  class="ui-layout-east">
       <div class="header ui-widget-header">Actions</div>
	    <div class="contents">
       </div>
	</div>

	<div class="ui-layout-north" style="overflow: hidden;">
        <div>
		</div>
	</div>

	<div class="ui-layout-south">
        <div>
        </div>
	</div>

	<div id="mainContent" style="overflow: hidden;">
		
		<div class="main-item" id="p4">
			<div class="item-header">Exposure Management</div>
			<div class="item-content">
		       	content....
			</div>
		</div>
	</div>


</body>
</html>
